<template>
  <li>
    <label>
      <!-- 
        checked属性
       -->
      <!-- <input type="checkbox" :checked="todo.isDone" @change="update" /> -->
      <!-- 
        v-model：
          之前：
            绑定value属性，值为表达式的值
            绑定input事件，事件中收集用户输入的内容，更新表达式的值
          现在：
            v-model适用于所有表单项，自动根据表单项来绑定相应的属性和事件
       -->
      <input type="checkbox" v-model="checked" />

      <!-- 
        props数据是只读的，不能直接修改
       -->
      <!-- <input type="checkbox" v-model="todo.isDone" /> -->
      <span>{{ todo.name }}</span>
    </label>
    <!-- 
      按钮显示&隐藏
        1. v-show + mouseenter\mouseleave
          <li @mouseenter="isShow = true" @mouseleave="isShow = false">
          <button v-show="isShow" class="btn btn-danger">删除</button>
          data() {
            return {
              isShow: false,
            };
          },
        2. :hover 
          性能更好
     -->
    <button class="btn btn-danger" @click="del">删除</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
    todo: {
      type: Object,
      required: true,
    },
    updateTodoIsDone: {
      type: Function,
      required: true,
    },
    delTodo: {
      type: Function,
      required: true,
    },
  },
  methods: {
    // update() {
    //   this.updateTodoIsDone(this.todo.id);
    // },
    del() {
      if (window.confirm(`您确认要删除${this.todo.name}任务吗？`)) {
        this.delTodo(this.todo.id);
      }
    },
  },
  // data() {
  //   return {
  //     isShow: false,
  //   };
  // },
  computed: {
    checked: {
      // 当v-model读取表达式的值，触发get
      get() {
        return this.todo.isDone;
      },
      // 当v-model设置表达式的值，触发set
      set() {
        this.updateTodoIsDone(this.todo.id);
      },
    },
  },
};
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:hover button {
  display: block;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>